<template>
  <!-- 光照强度相关的整体区域 -->
  <div class="IlluminationSection">
    <!-- 用于放置光照强度图表的容器 -->
    <div class="ChartContainer" ref="illuminationChart"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
// 引入Vue的ref、onMounted、watch等响应式相关的函数和钩子
import { ref, onMounted, watch } from "vue";
import { getNowData } from "@/api/Environment/index.js";

// 定义组件接收的props属性，其中initialThreshold是一个数字类型，默认值为50
const props = defineProps({
  initialThreshold: {
    type: Number,
  },
});

// 使用ref创建一个响应式数据，初始值为从props传入的initialThreshold，用于存储光照强度预警值
const illuminationThreshold = ref(props.initialThreshold);
// 使用ref创建一个空的图表元素引用
const illuminationChart = ref(null);
// const strengthData = ref([]);
const strengthData = ref([1]);

// 在组件挂载完成后执行的钩子函数
onMounted(() => {
  // 如果图表元素存在，则调用initChart函数初始化图表
  if (illuminationChart.value) {
    initChart(illuminationChart.value, illuminationThreshold.value);
  }
});

// 监听illuminationThreshold数据的变化，当变化时重新调用initChart函数更新图表
watch(illuminationThreshold, (newThresh) => {
  initChart(illuminationChart.value, newThresh);
});

// 初始化图表的函数，接收图表元素、标题、预警值作为参数
function initChart(chartElement, threshold) {
  // 如果图表元素不存在（可能是还未渲染完成等原因），则直接返回，不进行后续操作
  if (!chartElement) return;

  // 使用echarts初始化图表实例，传入对应的DOM元素
  const myChart = echarts.init(chartElement);
  const option = {
    // 图表标题配置，设置文本内容以及水平居中显示
    title: {
      text: "光照强度显示",
      left: "left",
    },
    // 提示框配置，设置触发方式为坐标轴触发
    tooltip: {
      trigger: "axis",
    },
    // x轴配置，类型为类目轴，设置了对应的类目数据以及坐标轴标签颜色
    xAxis: {
      type: "category",
      data: ["1/09", "1/09", "1/09", "1/09", "1/09", "1/09", "1/09"],
      axisLabel: {
        color: "#333",
      },
    },
    // y轴配置，类型为数值轴，设置了坐标轴标签颜色
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#333",
      },
    },
    series: [
      {
        // 图表系列的数据，这里是示例的光照强度数据
        // data: strengthData.value,
        data: [0, 1, 1, 1, 0, 1, 0],
        // 图表系列类型为折线图
        type: "line",
        // 设置折线图线条及数据点的颜色
        itemStyle: {
          color: "#E6A23C",
        },
      },
    ],
  };
  // 使用设置好的配置项来渲染图表
  myChart.setOption(option);
}

// onMounted(async () => {
//     const res = await getNowData('培养皿4');
//     if (res.code == 201) {
//         strengthData.value = res.data.strength
//             .filter(item => item.value !== undefined)
//             .map(item => ({
//                 name: item.time,
//                 value: [item.time, item.value]
//             }));
//         initChart(illuminationChart.value, '光照强度实时显示', illuminationThreshold.value);
//     }
// });

// function initChart(chartElement, title, threshold) {
//     if (!chartElement) return;

//     const myChart = echarts.init(chartElement);
//     const option = {
//         title: {
//             text: title,
//             left: 'left'
//         },
//         tooltip: {
//             trigger: 'axis'
//         },
//         xAxis: {
//             type: 'time',
//             splitLine: {
//                 show: false
//             }
//         },
//         yAxis: {
//             type: 'value',
//             splitLine: {
//                 show: false
//             }
//         },
//         series: [{
//             name: '光照强度',
//             type: 'line',
//             data: strengthData.value,
//             smooth: true,
//             showSymbol: false,
//             lineStyle: {
//                 width: 2
//             },
//             markLine: {
//                 silent: true,
//                 data: [{
//                     yAxis: threshold,
//                     lineStyle: {
//                         color: 'red',
//                         type: 'dashed'
//                     }
//                 }]
//             }
//         }]
//     };

//     myChart.setOption(option);
// }
</script>

<style lang="scss" scoped>
.IlluminationSection {
  width: 50%;
  height: 400px;
  // 使用flex布局，并设置为垂直方向排列子元素（按列排列）
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // background-color: #000;

  .ChartContainer {
    // 设置图表容器的宽度为700px
    width: 100%;
    // 设置图表容器的高度为250px
    height: 300px;
    // 设置背景颜色为白色
    background-color: white;
    // 在图表容器和下方的表单之间添加20px的间距
    // margin-bottom: 20px;
  }
}
</style>
